@import "./reset";
@import "./px2vw";

@keyframes sk-chase {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes sk-chase-dot {

    80%,
    100% {
        transform: rotate(360deg);
    }
}

@keyframes sk-chase-dot-before {
    50% {
        transform: scale(0.4);
    }

    100%,
    0% {
        transform: scale(1.0);
    }
}

html {
    width : 100%;
    height: 100vh;

    body {
        height           : 100vh;
        width            : 100%;
        background-image : url(../images/背景图.png);
        background-repeat: no-repeat;
        background-size  : cover;

        .sk-chase {
            width           : 40px;
            height          : 40px;
            position        : absolute;
            left            : calc(50% - 20px);
            top             : calc(50% - 20px);
            transform-origin: 50%, 50%;
            animation       : sk-chase 2.5s infinite linear both;
            display         : none;

            .sk-chase-dot {
                width    : 100%;
                height   : 100%;
                position : absolute;
                left     : 0;
                top      : 0;
                animation: sk-chase-dot 2.0s infinite ease-in-out both;

                &:before {
                    content         : '';
                    display         : block;
                    width           : 25%;
                    height          : 25%;
                    background-color: #fff;
                    border-radius   : 100%;
                    animation       : sk-chase-dot-before 2.0s infinite ease-in-out both;
                }

                &:nth-child(1) {
                    animation-delay: -1.1s;
                }

                &:nth-child(2) {
                    animation-delay: -1.0s;
                }

                &:nth-child(3) {
                    animation-delay: -0.9s;
                }

                &:nth-child(4) {
                    animation-delay: -0.8s;
                }

                &:nth-child(5) {
                    animation-delay: -0.7s;
                }

                &:nth-child(6) {
                    animation-delay: -0.6s;
                }

                &:nth-child(1):before {
                    animation-delay: -1.1s;
                }

                &:nth-child(2):before {
                    animation-delay: -1.0s;
                }

                &:nth-child(3):before {
                    animation-delay: -0.9s;
                }

                &:nth-child(4):before {
                    animation-delay: -0.8s;
                }

                &:nth-child(5):before {
                    animation-delay: -0.7s;
                }

                &:nth-child(6):before {
                    animation-delay: -0.6s;
                }
            }
        }
    }
}